<template>
  <div id="map_wrap">
      <div id="map_bottom">

      </div>
<!--    地图加载中...-->
  </div>
</template>
<script>
// @ is an alias to /src
import L from 'leaflet';
import mapConfig from '@/utils/mapConfig/mapConfig';
import mapApi from '@/api/mapApi.js';
import 'leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js'
export default {
    name: 'mapWrap',
    props: {
        mapOpts : {
            default () {
                return {
                    url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                    center: [31.095501115527792, 121.21506141442373], //纬经度
                    zoom: 13, //层级
                    zoomControl: false,
                    attributionControl: false,
                }
            }
        }
    },
    data () {
        return {
            polygon: [],
            polyLine: [],
            mapContainer: {},
            newLatlngs: [],
            realRouteLine: [],
        }
    },
    components: {

    },
    methods: {
        animateHandle () {
          var latlngs = [
            [31.019538047562254, 121.18589400721251],
            [31.0188045011867, 121.21129989624025],
            [31.020057020608416, 121.23018264770509],
            [31.033390855761898, 121.23023986467162],
            [31.049344886839968, 121.23229980119505],
            [31.05787221225514, 121.23195647844115],
            [31.059342363536302, 121.20088576921265],
          ];
          var speedList = [1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1, 1]
          // 轨迹线
          var routeLine = L.polyline(latlngs, {
            weight: 8
          }).addTo(this.mapContainer);
          // 实时轨迹线
          this.realRouteLine = L.polyline([], {
            weight: 8,
            color: '#FF9900'
          }).addTo(this.mapContainer);
          console.log('routeLine1', routeLine)
          console.log('L.polylinedecorator2',  L.polylinedecorator)
          // 轨迹方向箭头
          var decorator = L.polylinedecorator(routeLine, {
            patterns: [{
              repeat: 50,
              symbol: L.Symbol.arrowHead({
                pixelSize: 5,
                headAngle: 75,
                polygon: false,
                pathOptions: {
                  stroke: true,
                  weight: 2,
                  color: '#FFFFFF'
                }
              })
            }]
          }).addTo(this.mapContainer);
          console.log('3step')

          console.log('decorator', decorator)
          var carIcon = L.icon({
            iconSize: [37, 26],
            iconAnchor: [19, 13],
            iconUrl: '../img/car.png'
          })
          // 动态marker
          var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
            speedList: speedList,
            interval: 200, // 默认为100mm
            icon: carIcon,
            playCall: this.updateRealLine
          }).addTo(this.mapContainer)
          this.newLatlngs = [routeLine.getLatLngs()[0]]
          animatedMarker.start()
        },
        updateRealLine(latlng) {
          this.newLatlngs.push(latlng)
          this.realRouteLine.setLatLngs(this.newLatlngs)
        },
        setView (coord, tier) { //定位
          this.mapContainer.setView(coord, tier)
        },
        // pointMovement (el) {
        //     // var fx = new L.PosAnimation();
        //     // // fx.run(el._icon, [31.799076586959984, 130.62156507421804], 15);
        // },
        drawSongJiang () {
            function randomHexColor() { //随机生成十六进制颜色
                // console.log('random', e)
                var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
                while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
                    hex = '0' + hex;
                }
                return '#' + hex; //返回‘#'开头16进制颜色
            }
            var myStyle = (e)=> {
                return {
                    "color": "#fff",
                    "weight": 0,
                    "opacity": 0.5,
                    "fillColor": randomHexColor(e),
                    "fillOpacity": .3,
                    dashOffset: '31232'
                }
            };

            mapApi.requireSongJiang().then(res=>{
                let mapGeoJson = JSON.parse(JSON.stringify(res.data))
                L.geoJSON(mapGeoJson, {
                    style: function (e){
                        return myStyle(e)
                    },
                }).addTo(this.mapContainer);
            })
        },
        removeLayer (layer) { // 清除在地图上画的东西
            this.mapContainer.removeLayer(layer)
        },
        removePolygon () {
            this.polygon.forEach(v=>{
                this.removeLayer(v)
            })
        },
        drawPolygon () { //画多边形
            const polygon = L.polygon([
                [31.216129813817968, 121.33461453983382],
                [31.204093813575934, 121.33427129321399],
                [31.205047942664986, 121.34319570532973],
                [31.2171938986665, 121.3419943421603],
                [31.216129813817968, 121.33461453983382],
            ],{}).addTo(this.mapContainer)
            var myIcon = L.divIcon({
                html: "staticLabel",
                className: 'my-div-icon',
                iconSize:30
            });
            L.marker(polygon.getBounds().getCenter(), { icon: myIcon }).addTo(this.mapContainer);
            this.polygon.push(polygon)
        },
        drawMotion () { //画移动路径

        },
        drawPolyLine () {
            let longLatList = [
                // [31.21602222750125, 121.33274212650534],
                // [31.21114166072049, 121.33076844892452],
                // [31.20115993917614, 121.33081044114316],
            ]
            this.polyLine.push(L.polyline(longLatList,
                {
                    color: "red",
                    fill: true,
                    fillColor: 'yellow',
                    fillOpacity: .5
                },
                {
                    auto: true
                },
                {
                    removeOnEnd: true,
                    icon: L.icon({
                        iconUrl: "/src/assets/img/2.png",
                        iconSize: [24, 40],
                        iconAnchor: [10, 3]
                    })
                }).addTo(this.mapContainer)
            )
        },
        addMarker (e, icon) { //撒点
            let coord = [e.latlng.lat, e.latlng.lng]
            var LeafIcon = L.Icon.extend({
                options: {
                    // shadowUrl: 'leaf-shadow.png',
                    iconSize:     [55, 55],
                    shadowSize:   [50, 64],
                    iconAnchor:   [22, 55],
                    shadowAnchor: [4, 62],
                    popupAnchor:  [5, -40],

                }
            });
            icon = icon || require('/src/assets/img/mapImg/car_point.png')
            var greenIcon = new LeafIcon({iconUrl: icon})
            let point = L.marker(coord, {icon: greenIcon, zIndexOffset: e.zIndexOffset || 0}).addTo(this.mapContainer).bindPopup(e.dom);
            return point
        },
        initMap () {
            let mapOpts = JSON.parse(JSON.stringify(this.mapOpts))
            this.mapContainer = L.map('map_bottom', {...mapOpts});
            if(process.env.NODE_ENV === 'development'){ //开发环境
                // baseLayer
                L.tileLayer(mapConfig.devBaseLayerUrl).addTo(this.mapContainer);
                // topLayer
                L.tileLayer(mapConfig.devTopLayerUrl).addTo(this.mapContainer);
            }else{
                // baseLayer
                L.tileLayer(mapConfig.proBaseLayerUrl).addTo(this.mapContainer);
                // topLayer
                L.tileLayer(mapConfig.proTopLayerUrl).addTo(this.mapContainer);
            }
            this.mapContainer.on('click',(e)=>{
                console.log(e)
                this.$emit('click',e)
            })
        }
    },
    mounted() {
        this.initMap()
        // this.drawSongJiang()
    }
}
</script>

<style lang="stylus">
    #map_wrap{
        height: 100%;
        #map_bottom{
            height: 100%;
        }
    }
</style>
